import React, { Component } from 'react';

import {LoginStyled} from './LoginStyled'
import Fanhui from 'images/nav/whiteback.png'
import pswImg from 'images/login/pswImg.png'
import yzm from 'images/login/yzm@3x.png'
import yj from 'images/login/yj.png'
import qingchu from 'images/login/qingchu.png'
import email from 'images/login/email@3x.png'


// 头部引入
import Navigation from 'components/Navigation/Navigation'
import Button from 'components/UIButton/UIButton'
import qs from "qs";
import { Toast, Modal } from 'antd-mobile'



let body = {}
class Signin extends Component {
  state = {
    showPass : true,
  }
  render() {
    return (
      <LoginStyled>
        <Navigation
          title = "修改密码"
          titleSize = '.17rem'
          leftImg={Fanhui}
          leftImgWidth='.2rem'
          leftImgHeight='.2rem'
          leftPadding='0 0 0 .15rem'
          clickLeft={() => this.onClickLeft("left")}
        ></Navigation>

        <div className="fromwrap">
          <h2>
            修改密码
          </h2>

          <div className='one wrap'>
            <img src={email} alt=""/>
            <div className='fu fu1'>
            <input ref='user' className='user' type="text" placeholder='请输入邮箱账户'/>
            <Button
            img={qingchu}
            width='.3rem'
            height='.3rem'
            imgWidth='.18rem'
            imgHeight= '.18rem'
            imgGrow = '0'
            clickButton = {this.clickClearBtn}
            ></Button>
            </div>
          </div>

          
          <div className='four wrap'>
            <img src={pswImg} alt=""/>
            <div className='fu fu3'>
            <input ref='password' className='password' type="password"  placeholder='请输入旧密码'/>
            <Button
            img={yj}
            width='.3rem'
            height='.3rem'
            imgWidth='.16rem'
            imgHeight= '.16rem'
            imgGrow = '0'
            selected= {this.state.showPass}
            clickButton = {this.clickClearChangeShow}></Button>
            </div>
          </div>
        
          <div className='four wrap'>
            <img src={pswImg} alt=""/>
            <div className='fu fu4'>
            <input ref='repassword' className='repassword' type="password"  placeholder='请输入新密码'/>
            
            </div>
          </div>
        
          <Button
          margin = '.4rem 0 0 0'
          title='确定'
          width='100%'
          height='.35rem'
          backgroundColor='#23B5B7'
          titleColor='#fff'
          titleSzie='.16rem'
          borderRadius='.05rem'
          clickButton={this.clickSignup}
          ></Button>
        </div>
      </LoginStyled>
    );
  }

  onClickLeft() {
    this.props.history.go(-1)
  }
  clickClearBtn=()=>{
    console.log('清空')
    const useIpt = document.getElementsByClassName('user')[0]
    useIpt.value = ''
  }
  
  clickClearChangeShow=()=>{
   
    this.setState({
      showPass: !this.state.showPass,
    },()=>{
      if(this.state.showPass){
        this.refs.password.type='password'
        this.refs.repassword.type='password'
      }else{
        this.refs.password.type='text'
        this.refs.repassword.type='text'
      }
    }) 
  }
  clickSignup= ()=>{
    
    if(!this.refs.user.value){
      Toast.info('请输入用户名！',1.5)
      return
    }
    if(!this.refs.password.value){
      Toast.info('请输入旧密码！',1.5)
      return
    }
    if(!this.refs.repassword.value){
      Toast.info('请输入新密码！',1.5)
      return
    }
    
    body.email = this.refs.user.value
    body.password = this.refs.password.value
    body.npassword = this.refs.repassword.value
    
    fetch('/Legang/user/change',{   
      method:"POST",
      headers:{
          "Content-type":"application/x-www-form-urlencoded",
      },     
      body: qs.stringify(body)
    })    
    .then(response => response.json())
    .then(result => {
      console.log(result)
    
      if(result.flag){
        // replace替换当前路由，路由表中不存在本页路由
        // this.props.history.replace('/index/home')
        this.props.history.push('/index/home')

      }else{
        Toast.info(result.errorMsg)
      }
      
    })
 
  }
}

export default Signin;